<template>
  <div
    class="p-tag"
    :style="{ color: color, background: background, fontSize: fontSize }"
    @click="click"
  >
    {{ title }}
  </div>
</template>

<script>
export default {
  props: {
    // index
    index: {
      type: Number,
      default: null
    },
    // 字体大小
    fontSize: {
      type: String,
      default: '16px'
    },
    // 字体颜色
    color: {
      type: String,
      default: '#333333'
    },
    // 背景颜色
    background: {
      type: String,
      default: '#F6F6F6'
    },
    // 标签内容
    title: {
      type: String,
      default: '标签'
    }
  },
  data() {
    return {
      tagKey: 0
    }
  },
  mounted() {},
  methods: {
    // 点击事件
    click() {
      this.$emit('click', this.index)
    }
  }
}
</script>

<style lang="less" scoped>
.p-tag {
  display: inline-block;
  padding: 8px 30px;
  border-radius: 20px;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: transform;
  cursor: pointer;
}

.p-tag:hover,
.p-tag:focus,
.p-tag:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  color: #0b51c1 !important;
  background: #e9f2ff !important;
}
</style>
